
<head> 
  <script src="modernizr.js" type="text/javascript"></script> 
  <script src="jquery.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
var currentstation = "DVN/DVN";
var part1='http://maps.googleapis.com/maps/api/geocode/json?address=';
var part2='&sensor=true';
var abref1 = 'http://weather.cod.edu/nexrad/brefs/';
var asrmv1 = 'http://weather.cod.edu/nexrad/local/';
var abref2 = '.BREF1.gif';
var asrmv2 = '.SRMV1.gif';
var query;
var returnedzip;
var stations=new Array();
stations[0]={lat:41.6044264, lon:-88.084361, code:"LOT/LOT"};
stations[1]={lat:40.150544, lon:-89.336842, code:"ILX/ILX"};
stations[2]={lat:41.611556, lon:-90.5809987, code:"DVN/DVN"};
stations[3]={lat:41.7311788, lon:-93.7229235, code:"DMX/DMX"};
 
function get_location() {
  if (Modernizr.geolocation) {
    navigator.geolocation.getCurrentPosition(set_position, handle_error);
  } else {
    $("#askforzip").css('display','block');
  }
}
 
function set_position(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  currentstation = getstation(latitude,longitude);
  document.getElementById('container1').src = abref1+currentstation+abref2;
  document.getElementById('container2').src = asrmv1+currentstation+asrmv2; 
}
 
function handle_error(err) {
  alert(err.message);
}
 
get_location();
 
 
 
//FIX THIS
 
 
function distance(lat1, lon1, lat2, lon2) {
	var radlat1 = Math.PI * lat1/180
	var radlat2 = Math.PI * lat2/180
	var radlon1 = Math.PI * lon1/180
	var radlon2 = Math.PI * lon2/180
	var theta = lon1-lon2
	var radtheta = Math.PI * theta/180
	var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
	dist = Math.acos(dist)
	dist = dist * 180/Math.PI
	dist = dist * 60 * 1.1515
	return dist
}    
 
 
function pleasework(){
  document.getElementById('container1').src = abref1+"DVN/DVN"+abref2;
  document.getElementById('container2').src = asrmv1+"DVN/DVN"+asrmv2;
//  query=$("#queriedzip").val();
//  $.getJSON(part1+query+part2,function(place){
//	alert(place);
//    var returnedziplat = place.results[0].geometry.location.lat;
//    var returnedziplng = place.results[0].geometry.location.lng;
//    currentstation = getstation(returnedziplat,returnedziplng);
//    document.getElementById('container2').src = abref1+currentstation+abref2;
//    document.getElementById('container2').src = asrmv1+currentstation+asrmv2;
//    
//    //var lookAt = ge.createLookAt('');
//    //lookAt.set(place.results[0].geometry.location.lat, place.results[0].geometry.location.lng, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 60, 60000);
//    //ge.getView().setAbstractView(lookAt);
//  });
}
 
 
  //query=$("#query").val();
  //$.getJSON(part1+query+part2,function(place){
  //  returnedziplat = place.results[0].geometry.location.lat;
  //  returnedziplng = place.results[0].geometry.location.lng;
  //});
  
  function getstation(currentlat, currentlng){
    //document.write(currentlat+" "+currentlng+"<br />");
    //document.write(stations[0].lat+" "+stations[0].lon+" "+stations[0].code+"<br />");
  var shortdistance = distance(currentlat,currentlng,stations[0].lat,stations[0].lon);
  var shortindex = 0;
  for (i=1; i < stations.length; i++){
    var dist = distance(currentlat,currentlng,stations[i].lat,stations[i].lon);
    //document.write(dist+" ");
    if (dist < shortdistance){
      shortdistance = dist;
      shortindex = i;
    }
  }
  //alert(shortindex);
  return stations[shortindex].code;
}
 
 
</script> 
 
<style type='text/css'> 
#askforzip{
  height:71px;
  width:247px;
  font-family:sans-serif;
  font-size:12px;
  position:absolute;
  top:532px;
  left:556px;
  z-index:4;
  background:url('hash.gif') repeat;
  border:1px solid #000;
  -moz-border-radius:5px 5px 5px 5px; 
  -webkit-border-radius:5px 5px 5px 5px; 
  border-radius:5px 5px 5px 5px;
}
 
#askforzip p{
  margin-left:5px;
}
 
#container1{
  height:600px;
  width:800px;
  position:absolute;
  z-index:2;
}
 
#container2{
  height:600px;
  width:800px;
  float:left;
  position:absolute;
  z-index:3;
  opacity:0;
  -webkit-transition: opacity 1s linear;
   transition: opacity 1s linear;
}
 
#container2:active{
  opacity:1;
}
 
 
</style> 
 
</head> 
 
<body> 
  <div id="askforzip"> 
	<p>click/tap and hold for SRMV</p> 
	<span style="margin-left:5px;">override:
    <input type="text" id="queriedzip"/> 
    <button onclick="pleasework()">ENTER</button> 
  </div> 
    <img id="container1" /> 
    <img id="container2" /> 
</body>